<template>
  <n-modal
    :show="show"
    @update:show="handleUpdateShow"
    preset="dialog"
    title="选择头像"
    :style="{ width: '500px' }"
  >
    <n-grid :cols="5" :x-gap="12" :y-gap="12">
      <n-grid-item v-for="(avatar, index) in avatarList" :key="index">
        <div
          class="avatar-item"
          :class="{ 'avatar-selected': selectedIndex === index }"
          @click="handleSelect(index)"
        >
          <n-avatar
            round
            :size="64"
            :src="avatar"
            :class="{ 'avatar-hover': selectedIndex !== index }"
          />
        </div>
      </n-grid-item>
    </n-grid>
    <template #action>
      <n-space>
        <n-button @click="handleCancel">取消</n-button>
        <n-button type="primary" @click="handleConfirm">确认</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
  'select': [value: string]
}>()

// 预设头像列表
const avatarList = [
  'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
  'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
  'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
  'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png',
  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
]

const selectedIndex = ref(0)

const handleUpdateShow = (value: boolean) => {
  emit('update:show', value)
}

const handleSelect = (index: number) => {
  selectedIndex.value = index
}

const handleCancel = () => {
  emit('update:show', false)
}

const handleConfirm = () => {
  emit('select', avatarList[selectedIndex.value])
  emit('update:show', false)
}
</script>

<style scoped>
.avatar-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-selected {
  background-color: var(--n-primary-color-hover);
}

.avatar-hover:hover {
  transform: scale(1.1);
}
</style> 